/*
 * @Author: your name
 * @Date: 2021-05-19 17:47:55
 * @LastEditTime: 2021-05-31 01:08:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /xiangpan-admin/src/pages/staff/index.tsx
 */
import { IForm } from '@/components/form/interface';
import HeaderForm from '@/components/form';

import {
  Button,
  Card,
  Space,
  Table,
  Tag,
  Modal,
  TablePaginationConfig,
} from 'antd';
import React, { useState } from 'react';
import StaffModal from './staffModal';
import { PlusOutlined } from '@ant-design/icons';
import { useRequest } from 'umi';
import initPagination from '@/use/initPagination';
import useObj from '@/use/useObj';
import { globalModel } from '../globalModel';
import {
  BellStatus,
  BellStatusList,
  EPermission,
  ISex,
  ProjectStatus,
  ProjectStatusList,
} from '../../enum/index';
import { IFormTypeEnum } from '@/components/form/formComponent';
import {
  cancel_schedule,
  change_bell_status,
  delete_staff,
  get_bell_list,
  get_schedule_list,
  get_staff_list,
} from '@/services/pages';
import { useEffect } from 'react';
import { formatDateTime, GetQueryString } from '../../utils/utils';
import _ from '@umijs/deps/compiled/lodash';
interface IProps {}

const ScheduleApply = (props: IProps) => {
  const [obj, setObj] = useObj({
    ...initPagination,
    visible: false,
    refresh: null,
    row: null,
    search: null,
    status: -1,
  });

  const refresh = GetQueryString('refresh');

  const { data, error, loading } = useRequest(
    () =>
      get_bell_list({
        page_size: obj.pagination.pageSize,
        page_num: obj.pagination.current,
        search: obj.search,
        status: obj.status,
      }),
    {
      refreshDeps: [
        obj.pagination,
        obj.refresh,
        obj.search,
        obj.status,
        GetQueryString('refresh'),
      ],
    },
  );

  useEffect(() => {
    console.log(refresh, 'refresh==');

    if (refresh) {
      setObj({ refresh: Symbol() });
    }
  }, [refresh]);

  useEffect(() => {
    setObj((obj) => {
      obj.pagination.total = data?.results[0]?.total || 0;
    });
  }, [data]);

  const changeBellStatus = (props: { bell_id: string; status: number }) => {
    Modal.confirm({
      title: props.status === 1 ? '同意申请' : '拒绝申请',
      content: '操作之后将发送消息同步给该包厢！',
      onOk: async () => {
        await change_bell_status({
          bell_id: props.bell_id,
          status: props.status,
        });
        setObj((obj) => {
          obj.pagination.current = 1;
          obj.refresh = Symbol();
        });
      },
    });
  };

  const columns: IForm[] = [
    {
      key: 'box_name',
      dataIndex: 'box_name',
      title: '包厢',
    },
    {
      key: 'staff_name',
      dataIndex: 'staff_name',
      title: '技师',
    },
    {
      key: 'project_name',
      dataIndex: 'project_name',
      title: '项目',
    },
    {
      key: 'create_time',
      dataIndex: 'create_time',
      title: '申请时间',
      render: (text, record) => {
        return formatDateTime(text);
      },
    },
    {
      key: 'status',
      dataIndex: 'status',
      title: '状态',
      width: 80,
      render: (text, record) => {
        return BellStatus[text as keyof typeof BellStatus];
      },
    },
    {
      key: 'opt',
      dataIndex: 'opt',
      title: '操作',
      render: (text, record) => {
        return (
          <React.Fragment>
            {record.status === 0 && (
              <Space>
                <Button
                  onClick={() => {
                    changeBellStatus({ bell_id: record.bell_id, status: 1 });
                  }}
                >
                  同意
                </Button>
                <Button
                  type="primary"
                  danger
                  onClick={() => {
                    changeBellStatus({ bell_id: record.bell_id, status: 2 });
                  }}
                >
                  拒绝
                </Button>
              </Space>
            )}
          </React.Fragment>
        );
      },
    },
  ];

  const List: IForm[] = [
    {
      key: 'search',
      type: IFormTypeEnum.Input,
      label: '会员',
    },
    {
      key: 'status',
      type: IFormTypeEnum.Select,
      width: 200,
      data: {
        list: BellStatusList,
      },
      label: '状态',
    },
  ];

  return (
    <Card title="加钟申请">
      <div className="flex-between">
        <HeaderForm
          list={List}
          layout="inline"
          style={{ margin: '10px 0' }}
          onSubmit={(form) => {
            setObj({ search: form.search, status: form.status });
          }}
        />
      </div>

      <Table
        rowKey={(record) => record.schedule_id}
        loading={loading}
        columns={columns}
        dataSource={data?.results}
        pagination={obj.pagination}
        onChange={(pagination: TablePaginationConfig): void => {
          const { current, pageSize } = pagination;
          setObj((obj: any) => {
            obj.pagination.current = current;
            obj.pagination.pageSize = pageSize;
            obj.onReFresh = Symbol();
          });
        }}
      />
    </Card>
  );
};
export default ScheduleApply;
